// 获取用户登录的信息
function getUserMessage() {
    let userMessage = JSON.parse(localStorage.getItem('userDataInformation'))
    if (userMessage) {
        let str = `
                    <li><img src="${userMessage[0].headPortrait}" alt=""></li>
                    <li>${userMessage[0].userName}</li>
                `
        $('#headerTop .headerTopUserMessage').html(str)
    }else{
        let str = `
                    <li>未登录</li>
                `
        $('#headerTop .headerTopUserMessage').html(str)
    }
}

// 搜索展开部分
function unSearch() {
    $('#header>.search>img').on('click', function () {
        $('#header>.searchPro').animate({
            width: 'toggle'
        }, 350)
    })
}

// 搜素功能
function searchPro() {
    let count
    $('#header>.searchPro>input').on('keydown', function (e) {
        let keyCode = e.keyCode || e.which
        if (keyCode == 13) {
            $.ajax({
                url: 'http://www.xiongmaoyouxuan.com/api/search',
                type: 'get',
                data: {
                    word: $('#header>.searchPro>input').val()
                },
                success: function (data) {
                    let Arr = data.data.list
                    if (Arr.length % 4 == 0) {
                        count = Arr.length
                    } else {
                        count = Arr.length - Arr.length % 4
                    }
                    localStorage.setItem("searchList", JSON.stringify(Arr.slice(0, count)))
                    location.href = '../pages/search.html'
                },
                error: function (err) {
                    alert("网络请求失败：" + err)
                }
            })
        }
    })
}

// 顶部商品名称展示商品图片
function hearderProNameToShowProNav() {
    $('#header .proNameNav li').on('mouseover',function(){
        $(this).css('cursor', 'pointer')
    })
    $('#header .proNav').css('display', 'none')
    $('#header .proNameNav li').on('click', function () {
        $(this).css('cursor', 'pointer')
        $('#header .proNav').slideToggle(1000)
        if ($(this).index() == 0) {
            $.ajax({
                url: 'http://quan.lukou.com/api/tab/2?start=0',
                type: 'get',
                success: function (data) {
                    headerProNav(data.data.hotCommodities)
                },
                error: function (err) {
                    alert("网络请求失败：" + err)
                }
            })
        }
        if ($(this).index() == 1) {
            $.ajax({
                url: 'http://quan.lukou.com/api/tab/4?start=0',
                type: 'get',
                success: function (data) {
                    headerProNav(data.data.items.list)
                },
                error: function (err) {
                    alert("网络请求失败：" + err)
                }
            })
        }
        if ($(this).index() == 2) {
            $.ajax({
                url: 'http://quan.lukou.com/api/tab/10?start=0',
                type: 'get',
                success: function (data) {
                    headerProNav(data.data.items.list)
                },
                error: function (err) {
                    alert("网络请求失败：" + err)
                }
            })
        }
        if ($(this).index() == 3) {
            $.ajax({
                url: 'http://quan.lukou.com/api/tab/12?start=0',
                type: 'get',
                success: function (data) {
                    headerProNav(data.data.items.list)
                },
                error: function (err) {
                    alert("网络请求失败：" + err)
                }
            })
        }
        if ($(this).index() == 4) {
            $.ajax({
                url: 'http://quan.lukou.com/api/tab/11?start=0',
                type: 'get',
                success: function (data) {
                    headerProNav(data.data.items.list)
                },
                error: function (err) {
                    alert("网络请求失败：" + err)
                }
            })
        }
    })
}

// 顶部渲染商品图片信息
function headerProNav(proNavList) {
    let proArr = proNavList.map(item => {
        return `
                <div class="proNavItem">
                    <div class="proNavItemImg">
                        <img src="${item.image}" alt="">
                    </div>
                    <span>${item.title}</span>
                </div>
                `
    }).join('')
    $('#header .proNav').html(proArr);
}

// 轮播图信息
function onSwiper() {
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/tab/1',
        type: 'get',
        headers: {
            'x-platform': 'pc'
        },
        success: function (data) {
            loadSwiper(data.data.banners)
        },
        error: function (err) {
            alert("网络请求失败：" + err)
        }
    })
}

function loadSwiper(bannersList) {
    let str = ''
    let bannersArr = bannersList.map(item => {
        return `
            <img class="swiper-slide" src="${item.imageUrl}" alt=""></img>
        `
    }).join('')

    $('.swiper .swiper-wrapper').html(bannersArr);
    swpierImages()
}

function swpierImages() {
    var mySwiper = new Swiper('.swiper', {
        loop: true, // 循环模式选项
        autoplay: true, //自动轮播

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    })
}

// 轮播图中的各种商品分类显示内容信息
function categoryShowInformation() {
    $('#category li').on('mouseover', function () {
        $('#classifiedInformation').removeAttr('display')
        $('#classifiedInformation').css('display', 'block')
        if ($(this).index() == 0) {
            let str =
                `
                <h3>女装</h3>
                <div class="information">
                    <span>衬衫</span>
                    <span>裤装</span>
                </div>
                <h3>女鞋</h3>
                <div class="information">
                    <span>帆布鞋</span>
                    <span>高跟鞋</span>
                    <span>皮鞋</span>
                    <span>单鞋</span>
                    <span>小白鞋</span>
                    <span>运动鞋</span>
                </div>
                `
            $('#classifiedInformation').html(str)
        }
        if ($(this).index() == 1) {
            let str =
                `
                <h3>男装</h3>
                <div class="information">
                    <span>本周上新</span>
                    <span>T恤</span>
                    <span>短裤</span>
                    <span>衬衫</span>
                    <span>休闲裤</span>
                    <span>牛仔裤</span>
                </div>
                <h3>男鞋</h3>
                <div class="information">
                    <span>19.9专区</span>
                    <span>品牌专区</span>
                    <span运动鞋</span>
                    <span>帆布鞋</span>
                    <span>豆豆鞋</span>
                    <span>板鞋</span>
                    <span>篮球鞋</span>
                    <span>小白鞋</span>
                    <span>皮鞋</span>
                </div>
                `
            $('#classifiedInformation').html(str)
        }
        if ($(this).index() == 2) {
            let str =
                `
                <h3>美妆</h3>
                <div class="information">
                    <span>暂无新品</span>
                </div>
                <h3>个护</h3>
                <div class="information">
                    <span>暂无新品</span>
                </div>
                `
            $('#classifiedInformation').html(str)
        }
        if ($(this).index() == 3) {
            let str =
                `
                <h3>配饰</h3>
                <div class="information">
                    <span>全网爆款</span>
                    <span>夏日限定</span>
                    <span>耳饰</span>
                    <span>发饰</span>
                    <span>项链手链</span>
                    <span>帽子</span>
                    <span>戒指</span>
                    <span>手表腰带</span>
                </div>
                <h3>箱包</h3>
                <div class="information">
                    <span>腋下包</span>
                    <span>日韩包包</span>
                    <span链条包</span>
                    <span>双肩包</span>
                    <span>帆布包</span>
                    <span>胸包</span>
                    <span>行李箱</span>
                    <span>钱包卡包</span>
                    <span>化妆包</span>
                    <span>文具袋</span>
                </div>
                `
            $('#classifiedInformation').html(str)
        }
        if ($(this).index() == 4) {
            let str =
                `
                <h3>零食王国</h3>
                <div class="information">
                    <span>9.9美食</span>
                    <span>肥宅快乐套餐</span>
                    <span>快速早餐</span>
                    <span>无辣不欢</span>
                    <span>嗜甜成隐</span>
                    <span>膨化食品</span>
                    <span>坚果果干</span>
                    <span>四级饮品</span>
                    <span>减肥瘦身</span>
                    <span>零食大礼包</span>
                </div>
                `
            $('#classifiedInformation').html(str)
        }
        if ($(this).index() == 5) {
            let str =
                `
                <h3>母婴用品</h3>
                <div class="information">
                    <span>孕妇用品</span>
                    <span>夏季童装</span>
                    <span>儿童玩具</span>
                    <span>孕妇护肤</span>
                    <span>奶瓶奶嘴</span>
                    <span>母婴食品</span>
                    <span>尿布湿巾</span>
                    <span>童鞋</span>
                    <span>宝宝用品</span>
                    <span>孕妇装</span>
                </div>
                `
            $('#classifiedInformation').html(str)
        }
        if ($(this).index() == 6) {
            let str =
                `
                <h3>手机</h3>
                <div class="information">
                    <span>手机</span>
                    <span>耳机</span>
                    <span>手机壳</span>
                    <span>移动电源</span>
                    <span>数据线</span>
                    <span>手机膜</span>
                    <span>游戏周边</span>
                </div>
                <h3>数码</h3>
                <div class="information">
                    <span>手机</span>
                    <span>耳机</span>
                    <span>数据线</span>
                    <span>壳膜支架</span>
                    <span>移动电源</span>
                    <span>电脑配件</span>
                    <span>影音娱乐</span>
                    <span>生活家电</span>
                </div>
                `
            $('#classifiedInformation').html(str)
        }
        if ($(this).index() == 7) {
            let str =
                `
                <h3>内衣袜子</h3>
                <div class="information">
                    <span>睡衣</span>
                    <span>打底裤袜</span>
                    <span>文胸</span>
                    <span>女士内裤</span>
                    <span>袜子</span>
                    <span>男士内裤</span>
                </div>
                `
            $('#classifiedInformation').html(str)
        }
        if ($(this).index() == 8) {
            let str =
                `
                <h3>文娱</h3>
                <div class="information">
                    <span>青春励志</span>
                    <span>礼物清单</span>
                    <span>文具控</span>
                    <span>学霸书单</span>
                    <span>减肥健身</span>
                    <span>二次元周边</span>
                    <span>解压玩具</span>
                </div>
                <h3>家居</h3>
                <div class="information">
                    <span>好价网红款</span>
                    <span>清洁用品</span>
                    <span>收纳用品</span>
                    <span>床上用品</span>
                    <span>厨具/餐具</span>
                    <span>家居装饰</span>
                    <span>纸品湿巾</span>
                    <span>雨伞雨具</span>
                    <span>萌宠用品</span>
                    <span>水杯</span>
                    <span>宿舍神器</span>
                </div>
                `
            $('#classifiedInformation').html(str)
        }
    })
    $('#category li').on('mouseout', function () {
        $('#classifiedInformation').css('display', 'none')
    })
    $('#classifiedInformation').on('mouseover', function () {
        $(this).css('display', 'block')
    })
    $('#classifiedInformation').on('mouseout', function () {
        $(this).css('display', 'none')
    })
}

// 轮播下的卡片图部分信息
function cardFigureData() {
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/tab/1',
        type: 'get',
        success: function (data) {
            cardFigureShow(data.data.gridsV2)
        },
        error: function (err) {
            alert("网络请求失败：" + err)
        }
    })
}

function cardFigureShow(cardFigureList) {
    let cardArr = cardFigureList.map(item => {
        return `
                <div class="cardFigureItem clearfix">
                    <div class="cardFigureLeft fl">
                        <img src="${item.imageUrl}" alt="">
                    </div>
                    <div class="cardFigureRight fl">
                        <h2>${item.title}</h2>
                        <p>${item.text}</p>
                        <button>GO</button>
                    </div>
                </div>
            `
    })
    $('#cardFigure').html(cardArr);
}

// 首页导航菜单部分
function navMenu() {
    $('#navMenu .navMenuItem li').on('click', function () {
        $('#navMenu .navMenuItem li').removeClass('active')
        $(this).addClass('active')
        if($(this).index()==0){
            location.href='../pages/index.html'
        }
        if($(this).index()==1){
            location.href='../pages/nineFreeShipping.html'
        }
        if($(this).index()==2){
            location.href='../pages/superValue.html'
        }
        if($(this).index()==3){
            location.href='../pages/emergencyCooling.html'
        }
    })
}

// 9块9专区及数据部分
function nineZone(){
    $.ajax({
        url:'http://www.xiongmaoyouxuan.com/api/column/29',
        type:'get',
        success:function(data){
            nineZoneShow(data.data.subColumns)
        },
        error:function(err){
            alert("网络请求失败：" + err)
        }
    })
}

function nineZoneShow(nineZoneList){
    let nineZoneArr = nineZoneList.map(item => {
        return `
                <li>${item.name}</li>
                `
    })
    $('#nineZone>.nineZoneList').html(nineZoneArr);
    nineZoneClick()
}

function nineZoneClick(){
    $('#nineZone>.nineZoneList li').on('click',function(){
        $('#nineZone>.nineZoneList li').removeClass('active')
        if($(this).index()==0){
            $(this).addClass('active')
            goodsListShow()
        }
        if($(this).index()==1){
            let count
            $(this).addClass('active')
            $.ajax({
                url:'http://quan.lukou.com/api/sub_column/1/items?start=0',
                type:'get',
                success:function(data){
                    let Arr = data.data.list
                    if (Arr.length % 4 == 0) {
                        count = Arr.length
                    } else {
                        count = Arr.length - Arr.length % 4
                    }
                    goodsList(Arr.slice(0, count))
                },
                error:function(err){
                    alert("网络请求失败：" + err)
                }
            })
        }
        if($(this).index()==2){
            let count
            $(this).addClass('active')
            $.ajax({
                url:'http://quan.lukou.com/api/sub_column/2/items?start=0',
                type:'get',
                success:function(data){
                    let Arr = data.data.list
                    if (Arr.length % 4 == 0) {
                        count = Arr.length
                    } else {
                        count = Arr.length - Arr.length % 4
                    }
                    goodsList(Arr.slice(0, count))
                },
                error:function(err){
                    alert("网络请求失败：" + err)
                }
            })
        }
        if($(this).index()==3){
            let count
            $(this).addClass('active')
            $.ajax({
                url:'http://quan.lukou.com/api/sub_column/3/items?start=0',
                type:'get',
                success:function(data){
                    let Arr = data.data.list
                    if (Arr.length % 4 == 0) {
                        count = Arr.length
                    } else {
                        count = Arr.length - Arr.length % 4
                    }
                    goodsList(Arr.slice(0, count))
                },
                error:function(err){
                    alert("网络请求失败：" + err)
                }
            })
        }
        if($(this).index()==4){
            let count
            $(this).addClass('active')
            $.ajax({
                url:'http://quan.lukou.com/api/sub_column/4/items?start=0',
                type:'get',
                success:function(data){
                    let Arr = data.data.list
                    if (Arr.length % 4 == 0) {
                        count = Arr.length
                    } else {
                        count = Arr.length - Arr.length % 4
                    }
                    goodsList(Arr.slice(0, count))
                },
                error:function(err){
                    alert("网络请求失败：" + err)
                }
            })
        }
        if($(this).index()==5){
            let count
            $(this).addClass('active')
            $.ajax({
                url:'http://quan.lukou.com/api/sub_column/5/items?start=0',
                type:'get',
                success:function(data){
                    let Arr = data.data.list
                    if (Arr.length % 4 == 0) {
                        count = Arr.length
                    } else {
                        count = Arr.length - Arr.length % 4
                    }
                    goodsList(Arr.slice(0, count))
                },
                error:function(err){
                    alert("网络请求失败：" + err)
                }
            })
        }
        if($(this).index()==6){
            let count
            $(this).addClass('active')
            $.ajax({
                url:'http://quan.lukou.com/api/sub_column/6/items?start=0',
                type:'get',
                success:function(data){
                    let Arr = data.data.list
                    if (Arr.length % 4 == 0) {
                        count = Arr.length
                    } else {
                        count = Arr.length - Arr.length % 4
                    }
                    goodsList(Arr.slice(0, count))
                },
                error:function(err){
                    alert("网络请求失败：" + err)
                }
            })
        }
        if($(this).index()==7){
            let count
            $(this).addClass('active')
            $.ajax({
                url:'http://quan.lukou.com/api/sub_column/50/items?start=0',
                type:'get',
                success:function(data){
                    let Arr = data.data.list
                    if (Arr.length % 4 == 0) {
                        count = Arr.length
                    } else {
                        count = Arr.length - Arr.length % 4
                    }
                    goodsList(Arr.slice(0, count))
                },
                error:function(err){
                    alert("网络请求失败：" + err)
                }
            })
        }
    })
}

// 商品列表部分
function goodsListShow() {
    let count
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/sub_column/7/items?start=0',
        type: 'get',
        success: function (data) {
            let Arr = data.data.list
            if (Arr.length % 4 == 0) {
                count = Arr.length
            } else {
                count = Arr.length - Arr.length % 4
            }
            goodsList(Arr.slice(0, count))
        },
        error: function (err) {
            alert("网络请求失败：" + err)
        }
    })
}

function goodsList(goods) {
    let goodsArr = goods.map(item => {
        return `
                <div class="goods" onClick=singlePro(${item.id})>
                    <img src="${item.image}" alt="">
                    <h2>${item.title}</h2>
                    <div class="packageMail clearfix">
                        <span class="tianmao fl">天猫</span>
                        <span class="baoyou fr">包邮</span>
                    </div>
                    <div class="goodsPrices">
                        <span class="price">￥${item.price}</span>
                        <span class="person">${item.saleNum}人已购买</span>
                        <span class="juan">${item.couponValue}</span>
                    </div>
                </div>
            `
    }).join('')
    $('#goodsList').html(goodsArr);
    viewMoreBtn(goods)
}

// 点击获取单个商品信息
function singlePro(singleProId){
    location.href='../pages/proDetails.html?id='+singleProId
}

//查看更多按钮
function viewMoreBtn(oldGoodsArr) {
    let page = 0
    $('#viewMore').on('click', function () {
        $.ajax({
            url: 'http://quan.lukou.com/api/sub_column/7/items',
            data: {
                start: 20,
                sort: page
            },
            type: 'get',
            success: function (data) {
                let count
                let newProList = [...oldGoodsArr, ...data.data.list]
                if (newProList.length % 4 == 0) {
                    count = newProList.length
                } else {
                    count = newProList.length - newProList.length % 4
                }
                goodsList(newProList.slice(0, count))
                    ++page
            },
            error: function (err) {
                alert("网络请求失败：" + err)
            }
        })
    })
}

// // 回到顶部按钮
// function backTop() {
//     $('#backTop').on('click', function () {
//         let time = setInterval(() => {
//             document.documentElement.scrollTop -= 3
//             $(this).removeAttr('display')
//             if (document.documentElement.scrollTop == 0) {
//                 clearInterval(time)
//                 $(this).css('display','none')
//             }
//         }, 5);
//     })
// }


// 各种方法的调用
getUserMessage()
unSearch()
searchPro()
hearderProNameToShowProNav()
onSwiper()
categoryShowInformation()
cardFigureData()
navMenu()
nineZone()
goodsListShow()
viewMoreBtn()
// backTop()